<template>
	<div>
		<div style="display: inline-block;font-size:18px;margin-bottom: 15px;">
			<a href="#" @click="prev" style="text-decoration:none;font-size: 14px;">
				<icon-svg name="jiantou" style="width: 1.2em;height: 1.2em;position: relative;top: 0.3em;"></icon-svg>
				返回
			</a>
			<span style="display: inline-block;margin: 0 15px;color: #D9D9D9;">|</span>
			<span>线路规划</span>
		</div>
		<div>
			<div id="container" style="width:95%;height:80vh;margin-left: 2.5%;"></div>

		</div>

	</div>
</template>

<script>
	import {
		jsonp
	} from 'vue-jsonp'

	var geocoder, map, markersArray, infoWindow = [];
	export default {
		data() {
			return {

				// 地图相关
				longitude: 108.948024, //经度
				latitude: 34.263161, //维度
				loadingMap: true,
				BMap: '',
				map: '',
				geoc: '',
				keyword: '',
				showMap: false,
				pointLngLat: '',

				lng: 108.948024,
				lat: 34.263161,
				polyline: [],
				qilng: 108.948024, //起点经度
				qilat: 34.263161, //起点纬度
				zhonglng: 108.948024, //终点经度
				zhonglat: 34.263161, //终点纬度
			}
		},
		methods: {
			// 返回上一级
			prev() {
				this.$router.back()
			},
			//定位获得当前位置信息
			getMyLocation() {
				var geolocation = new qq.maps.Geolocation("HW5BZ-ZCNCL-FKZPQ-EN35F-6WHM7-KLF5S", "代驾");
				geolocation.getIpLocation(this.showPosition, this.showErr);
			},
			showPosition(position) {
				this.setMap();
			},
			showErr(e) {
				this.getMyLocation(); //定位失败再请求定位，测试使用
			},
			//位置信息在地图上展示
			setMap() {
				var center = new TMap.LatLng(this.qilat, this.qilng);
				//初始化地图
				window.map = new TMap.Map('container', {
					center: new TMap.LatLng(this.qilat, this.qilng), //地图显示中心点
					zoom: 14 //缩放级别
				});
				var startPosition = new TMap.LatLng(this.qilat, this.qilng); // 路线规划起点

				var endPosition = new TMap.LatLng(this.zhonglat, this.zhonglng); // 路线规划终点
				var marker = new TMap.MultiMarker({
					// 创造MultiMarker显示起终点标记
					id: 'marker-layer',
					map: window.map,
					styles: {
						start: new TMap.MarkerStyle({
							width: 25,
							height: 35,
							anchor: {
								x: 16,
								y: 32
							},
							src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
						}),
						end: new TMap.MarkerStyle({
							width: 25,
							height: 35,
							anchor: {
								x: 16,
								y: 32
							},
							src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
						}),
					},
					geometries: [{
							id: '1',
							styleId: 'start',
							position: startPosition,
						},
						{
							id: '2',
							styleId: 'end',
							position: endPosition,
						},
					],
				});
				console.log('startPosition', startPosition, endPosition)
				var driving = new TMap.service.Driving({
					// 新建一个驾车路线规划类
					mp: false, // 是否返回多方案
					policy: 'PICKUP,NAV_POINT_FIRST', // 规划策略
				});
				driving.search({
					from: startPosition,
					to: endPosition
				}).then((result) => {
					// 搜索路径
					// result.result.routes[0].steps.forEach((step, index) => {
					//   document.getElementById('instruction').innerHTML += `<p>${index + 1}. ${
					//     step.instruction
					//   }</p>`;
					//   // 展示路线引导
					// });
					display_polyline(result.result.routes[0].polyline); // 绘制路径折线
				});
				// this.$http({
				// 	url: 'https://apis.map.qq.com/ws/direction/v1/driving/',
				// 	method: 'get',
				// 	params: this.$http.adornParams({
				// 		'from': '39.984039,116.307630',
				// 		'to': '39.977263,116.337063',
				// 		'output':'jsonp',
				// 		// 'callback': this.huidiao(),
				// 		'key': 'HW5BZ-ZCNCL-FKZPQ-EN35F-6WHM7-KLF5S'
				// 	})
				// }).then(({
				// 	data
				// }) => {
				// 	console.log('data-----',data)

				// })
				return console.log('==================================')

				//WebServiceAPI请求URL（驾车路线规划默认会参考实时路况进行计算）
				var url = "https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径
				url += "?from=" + this.qilat + "," + this.qilng; //起点坐标
				url += "&to=" + this.zhonglat + "," + this.zhonglng; //终点坐标
				url += "&output=jsonp&callback=cb"; //指定JSONP回调函数名，本例为huidiao
				url += "&key=HW5BZ-ZCNCL-FKZPQ-EN35F-6WHM7-KLF5S"; //开发key，可在控制台自助创建


				//发起JSONP请求，获取路线规划结果
				this.jsonp_request(url);

			},
			jsonp_request(url) {

				var script = document.createElement('script');
				script.src = url;
				document.body.appendChild(script);
			},


			huidiao(ret) {
				console.log('获取回调···', ret.result.routes[0])
				console.log('回调经纬度---', ret.result.routes[0].polyline)
				var coords = ret.result.routes[0].polyline,
					pl = [];
				// var coords = this.polyline, pl = [];
				//坐标解压（返回的点串坐标，通过前向差分进行压缩）
				var kr = 1000000;
				for (var i = 2; i < coords.length; i++) {
					coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
				}
				//将解压后的坐标放入点串数组pl中
				for (var i = 0; i < coords.length; i += 2) {
					pl.push(new TMap.LatLng(coords[i], coords[i + 1]));
				}

				display_polyline(pl) //显示路线

				//标记起终点marker
				console.log('new TMap.LatLng(this.qilat,this.qilng)', new TMap.LatLng(this.qilat, this.qilng))
				var marker = new TMap.MultiMarker({
					id: 'marker-layer',
					map: map,
					styles: {
						"start": new TMap.MarkerStyle({
							"width": 25,
							"height": 35,
							"anchor": {
								x: 16,
								y: 32
							},
							"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
						}),
						"end": new TMap.MarkerStyle({
							"width": 25,
							"height": 35,
							"anchor": {
								x: 16,
								y: 32
							},
							"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
						})
					},
					geometries: [{
						"id": 'start',
						"styleId": 'start',
						"position": new TMap.LatLng(this.qilat, this.qilng)
					}, {
						"id": 'end',
						"styleId": 'end',
						"position": new TMap.LatLng(this.zhonglat, this.zhonglng)
					}]
				});

			},
			display_polyline(pl) {

				//创建 MultiPolyline显示折线
				var polylineLayer = new TMap.MultiPolyline({
					id: 'polyline-layer', //图层唯一标识
					map: map, //绘制到目标地图
					//折线样式定义
					styles: {
						'style_blue': new TMap.PolylineStyle({
							'color': '#3777FF', //线填充色
							'width': 8, //折线宽度
							'borderWidth': 5, //边线宽度
							'borderColor': '#FFF', //边线颜色
							'lineCap': 'round', //线端头方式
						})
					},
					//折线数据定义
					geometries: [{
						'id': 'pl_1', //折线唯一标识，删除时使用
						'styleId': 'style_blue', //绑定样式名
						'paths': pl
					}]
				});
			},
			dataSelect(){
				if (this.$route.query.item) {
					let item = JSON.parse(this.$route.query.item)
					this.polyline = item.polyline
					this.qilng = item.shipAddressLongitude //起点经度
					this.qilat = item.shipAddressLatitude //起点纬度
					this.zhonglng = item.deliveryAddressLongitude //终点经度
					this.zhonglat = item.deliveryAddressLatitude //终点纬度
					// console.log('item',JSON.parse(item.polyline) )
					this.setMap();
				}
			},


		},
		created() {
		},
		mounted() {
			if (this.$route.query.item) {
				let item = JSON.parse(this.$route.query.item)
				this.polyline = item.polyline
				this.qilng = item.shipAddressLongitude //起点经度
				this.qilat = item.shipAddressLatitude //起点纬度
				this.zhonglng = item.deliveryAddressLongitude //终点经度
				this.zhonglat = item.deliveryAddressLatitude //终点纬度
				// console.log('item',JSON.parse(item.polyline) )
				this.setMap();
			}





		},
		watch: {
			'$route': 'dataSelect'
		}
	}
</script>

<style>
	.imgs {
		position: relative;
		border-radius: 6px;
		width: 148px;
		height: 148px;
		margin-right: 10px;
		display: inline-block;
	}

	.dels {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.dels .el-icon-delete {
		line-height: 148px;
		padding-left: 58px;
		font-size: 25px;
		color: #fff;
	}

	.imgs:hover .dels {
		width: 100%;
		height: 100%;
		background: #000;
		display: block;
		opacity: 0.5;
	}

	.bqList {
		padding: 4px 14px;
		margin: 4px;
		border: 1px solid #efefef;
		font-size: 12px;
		color: #999;
		border-radius: 4px;
		margin-right: 15px;
	}

	.delss {
		display: none;
		position: relative;
	}

	.delss .el-icon-delete {
		position: absolute;
		top: 0;
	}

	.bqList:hover .delss {
		display: initial;
		opacity: 0.5;

	}

	.tj {
		padding: 6px !important;
		margin: 4px;
		font-size: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.csssprite {
		width: 100% !important;
		height: 100% !important;
		border-radius: 50% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		min-height: 100% !important;
		max-height: 100% !important;
		border: 3px solid red !important;
	}

	#panel {
		position: absolute;
		background: #FFF;
		width: 350px;
		padding: 20px;
		z-index: 9999;
		top: 30px;
		left: 30px;
	}
</style>